import React, { Component } from 'react';
import { connect } from 'react-redux'

import { changePath } from "../../actions/routerAction";
import { SearchBar, WingBlank, Carousel, Grid } from 'antd-mobile'

import './mainContent.scss'

const data = Array.from(new Array(9)).map((_val, i) => ({
    icon: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1550479011783&di=c9699872e071832f16a9ef59ac82c031&imgtype=0&src=http%3A%2F%2Fimg.11665.com%2Fimg03_p%2Fi3%2FT1fk2.XbRhXXcOPSc5_060029.jpg',
    text: `西服${i}`,
    price: i
}));

const commodity = Array.from(new Array(9)).map((_val, i) => ({
    icon: 'xifu.jpg',
    text: `西服${i}`,
    price: `${i}.00`
}));

const classification = [
    { name: '西服', img: 'xifu.jpg' },
    { name: '皮鞋', img: 'xifu.jpg' },
    { name: '饰品', img: 'xifu.jpg' },
    { name: '大衣', img: 'xifu.jpg' }
]

@connect(
    null,
    { changePath }
)
class MainContent extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: ['1', '2', '3'],
            imgHeight: 176,
        }
    }

    componentDidMount() {
        // simulate img loading
        setTimeout(() => {
            this.setState({
                data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
            });
        }, 100);
    }

    render() {
        return (
            <div className='main-content' style={{ height: '100%' }}>
                <div className="header">
                    <span className="search-box">
                        <SearchBar placeholder="搜索" onFocus={() => {
                            sessionStorage.setItem('__search_prev_path__', this.props.location.pathname);
                            this.props.history.push('/search')
                            this.props.changePath('/search')
                        }} />
                    </span>
                    <span className="msg">
                        <img src={require('../../assets/searchHeaderImgs/index-msg.png')} alt="" />
                    </span>
                </div>
                <WingBlank className="run">
                    <Carousel
                        autoplay={false}
                        infinite
                        beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
                        afterChange={index => console.log('slide to', index)}
                    >
                        {this.state.data.map((val, index) => (
                            <a
                                key={val}
                                href="/"
                                style={{ display: 'inline-block', width: '100%', height: this.state.imgHeight }}
                            >
                                <img
                                    src={require(`../../assets/mainContentImgs/lun${index + 1}.jpg`)}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        // fire window resize event to change height
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }}
                                />
                            </a>
                        ))}
                    </Carousel>
                </WingBlank>
                <div className="class">
                    {classification.map((val, index) => (
                        <div className="option">
                            <img src={require(`../../assets/mainContentImgs/${val.img}`)} />
                            <span>{val.name}</span>
                        </div>
                    ))}
                </div>
                <div style={{ marginTop: 20 }}>
                    {/* <Grid data={data} square={false} columnNum={3} className="not-square-grid" /> */}
                </div>
                <div className='list'>
                    {commodity.map((val,index) => (
                        <div className='commodity'>
                            <div className='commodityImg'>
                               <img src={require(`../../assets/mainContentImgs/${val.icon}`)} /> 
                            </div>
                            <p className='text'>{val.text}</p>
                            <p className='price'>¥{val.price}</p>
                            <div className='shop'>购买</div>
                        </div>
                    ))}
                </div>
            </div>
        );
    }
}

export default MainContent;